<!--作者：薛嘉颖
描述：学生修改个人信息弹窗
修改人：薛嘉颖  -->
<template>
<div id="studentModifyInformationPopup">

  <div id="centerContent">
    <!-- 文本 -->
      <span id="Ttext">修改信息</span>
       <span class="down-icon" @click="backTeamScore"><img src="@/assets/icon/down.png" style="width: 55px; height: 55px;"></span>
       <!-- 线 -->
      <div id="line">
        <hr class="langHr">
      <hr class="shortHr">
      </div>
      <!-- 表单 -->
      <div id="detail">
          <ul id="detailUl">
            <li id="detailLi" v-for="(item,index) in detailData" :key="index">{{item.title}}{{item.val}}</li>
          </ul>
        </div>
         <!-- 保存按钮 -->
       <el-button type="primary">保存</el-button>
  </div>
</div>
</template>

<script lang='js'>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { reactive } from "@vue/reactivity";
export default {
  name: "studentModifyInformationPopup",

  setup(props,context) {
     function backTeamScore() {
            context.emit('closeclick',false)
        }
      const detailData = [
      {
        title:'姓名 : ',
        val: "薛嘉颖"
      },
       {
        title:'学号 : ',
        val: "199000951"
      },
       {
        title:'性别 : ',
        val: "女"
      },
       {
        title:'院系 : ',
        val: "软件学院"
      },
       {
        title:'年级 : ',
        val: "19"
      },
       {
        title:'专业 : ',
        val: "软件学院"
      },
       {
        title:'手机号 : ',
        val: "15736190069"
        
      },
       {
        title:'辅导员 : ',
        val: "易华琴"
      },
       {
        title:'邮箱 : ',
        val: "jiayingxue0@gmail.com"
      },
        {
        title:'',
        val: ""
      },
       {
        title:'身份证号码 : ',
        val: "350305200105130042"
      },
    ];

    return {
     detailData,
     backTeamScore
    };
  },
};
</script>






<style lang='less' scoped>

  #centerContent{
    width: 1000px;
    height: 500px;
    background-color: #e0eef2;
    border-radius: 30px;
    margin-left: 140px;
    margin-top: 30px;
    #Ttext{
      // 修改密码title
            position: absolute;
            margin-left: 80px;
            top: 39px;
            font-size: 40px;
            color: #3e94ad;
            font-weight: 540;
    }
      .down-icon{
        // 关闭按钮
               position: absolute;
               top: 45px;
               right: 100px;
               cursor:pointer;
        }
    #line{
      margin-top: -70px;
      margin-bottom: 70px;
    .langHr{
              width: 700px;
              border: 1px solid #c2dae2;
              margin-top: 112px;
              background-color: #c2dae2;
              position: absolute;
              margin-left: 240px;
          }
    .shortHr{
                    margin-left: 60px;
                    width: 200px;
                    border: 4px solid #3e94ad;
                    margin-top: 80px;
                    margin-bottom: 40px;
                    border-radius: 20px;
                    position: absolute;
                    top: 30px;
                    background-color: #3e94ad;
          }
    }
      #detail{
        width: 50%;
        #detailUl{
          flex-wrap:wrap;
          list-style: none;
          margin-left: 300px;
          width: 89%;
          padding-top: 160px;
          display: flex;
          #detailLi{
            width: 50%;
            padding-bottom: 10px;
            color: rgb(138, 136, 136);
          }
        }
      }
          .el-button{
           margin-left: 400px;
            background-color: #397f96;
            position: relative;
            top: 35px;
    }
  }

</style>
